<!--
 * @Author: your name
 * @Date: 2021-04-13 15:30:49
 * @LastEditTime: 2021-04-28 10:49:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\owns\addMemberModal.vue
-->
<template>
  <!-- 添加成员Modal -->
  <a-modal :visible="memberModal" title="添加人员" ok-text="保存" @ok="handleOk" @cancel="handleCancel" :afterClose="onCloseModal">
    <a-form-model ref="addMember" :model="addMemberState" :rules="addMemberRules" :label-col="{span:4}" :wrapper-col="{span:18}">
      <a-form-model-item label="角色名称" prop="name">
        <a-input v-model="addMemberState.name" placeholder="输入内容" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="选择成员" prop="memberList">
        <a-tree-select style="width: 100%" :tree-data="memberTree" :value="addMemberState.memberList" :show-checked-strategy="SHOW_CHILD" :replaceFields="{title:'name', key:'id',value:'id' }" :treeExpandedKeys="expandedKeys" :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }" placeholder="请选择成员" allow-clear multiple @change="onChange" @select="onSelect" @treeExpand="onExpand"></a-tree-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import {
  topDepartment,
  subDepartment
} from '@/services/staff';
import { TreeSelect } from 'ant-design-vue';
export default {
  name: "addMemberModal",
  props: {
    memberModal: {
      type: Boolean,
      default: false
    },
    roleName: String
  },
  data () {
    return {
      SHOW_CHILD: TreeSelect.SHOW_CHILD,
      addMemberState: {
        name: "",
        memberList: []
      },
      loadedKeys: [],
      selectedKeys: [],
      loadedKerList: [],
      addMemberRules: {
        name: [{ required: true, message: "角色名称不允许为空！", trigger: "blur" }],
        memberList: [{ required: true, message: "必须选择成员!", trigger: "change" }]
      },
      memberTree: [
        {
          name: "组织架构",
          id: "0-0",
          checkable: false,
          children: []
        }
      ],
      subIdList: [],
      expandedKeys: ['0-0']
    };
  },
  watch: {
    "roleName": {
      handler (val) {
        if (val) {
          this.addMemberState.name = val;
        }
      },
      immediate: true
    }
  },
  methods: {
    focus (e) {
      console.log(e)
    },
    handleOk () {
      const that = this;
      that.$refs.addMember.validate(valid => {
        if (valid) {
          that.$emit("cancelModal", {
            modal: "添加人员", success: "ok", data: that.addMemberState
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleCancel () {
      this.$refs.addMember.resetFields();
      this.$emit("cancelModal", {
        modal: "添加人员", success: "cancel", data: true
      });
    },
    onCloseModal () {
      this.handleCancel()
    },
    onChange (val) {
      const bool = this.memberTree[0].children.some(value => value.id == val[val.length - 1])
      if (!bool) {
        this.addMemberState.memberList = val
      }
    },
    onExpand (val) {
      this.expandedKeys = val
    },
    onSelect (id) {
      var bool = this.expandedKeys.includes(id);
      var bool1 = this.subIdList.includes(id);
      if (!bool && bool1) {
        subDepartment({ id: id }).then(res => {
          if (res.data.code == 200) {
            const data = res.data.data;
            let list = [], list1 = [], childrenList = []
            if (data.userList.length) {
              list = data.userList.map(item => {
                return {
                  id: item.id,
                  name: item.realName
                }
              })
            }
            for (var i of data.childrenList) {
              if (i.userList.length) {
                list1 = list1.concat(i.userList.map(item => {
                  return {
                    id: item.id,
                    name: item.realName
                  }
                }))
              }
              childrenList = list.concat(list1);
            }
            this.memberTree[0].children.forEach(val => {
              if (childrenList.length) {
                if (val.id == id) {
                  val.children = childrenList
                }
              }
            })
            this.expandedKeys.push(id)
          }
        })
      }
    },
    getTopDepartment () {
      topDepartment().then(res => {
        if (res.data.code == 200) {
          this.memberTree[0].children = res.data.data;
          for (var i of this.memberTree[0].children) {
            this.subIdList.push(i.id);
            //   i.checkable = false;
            //   i.selectable = false;
            //   i.isLeaf = true;
          }
        }
      })
    },
    onSelectDepartment (selectedKeys) {
      console.log(selectedKeys);
      // const id = selectedKeys[0];
      // var bool = this.expandedKeys.includes(id);
      // if (!bool) {
      //   subDepartment({ id }).then(res => {
      //     if (res.data.code == 200) {
      //       const data = res.data.data;
      //       this.memberTree[0].children.forEach(val => {
      //         if (data.childrenList.length) {
      //           if (val.id == id) {
      //             val.children = data.childrenList
      //           }
      //         }
      //         this.expandedKeys.push(id)
      //       })
      //     }
      //   })
      // }
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        const { id } = treeNode.dataRef;
        setTimeout(() => {
          var bool = this.loadedKerList.includes(id);
          if (!bool) {
            subDepartment({ id: id }).then(res => {
              if (res.data.code == 200) {
                const data = res.data.data;
                let list = [], list1 = [], childrenList = []
                if (data.userList.length) {
                  list = data.userList.map(item => {
                    return {
                      id: item.id,
                      name: item.realName
                    }
                  })
                }
                for (var i of data.childrenList) {
                  if (i.userList.length) {
                    list1 = list1.concat(i.userList.map(item => {
                      return {
                        id: item.id,
                        name: item.realName
                      }
                    }))
                  }
                  childrenList = list.concat(list1);
                }
                // 修改下级人员为不是叶子节点  属性已添加  不生效
                for (var j = 0; j < childrenList.length; j++) {
                  childrenList[j].isLeaf = false;
                }
                treeNode.dataRef.children = childrenList;
              }
            })
          }
          this.memberTree = [...this.memberTree];
          resolve();
        }, 1000);
      });
    },
  },
  mounted () {
    this.getTopDepartment();
  }
};
</script>

<style>
</style>